<!--课程考核实施计划变更申请记录-->
<template>
  <div class="assessment-container change-record-assessment-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <InputItem
          :name="'课程名称'"
          :value="courseName"
          @input="
            (e) => {
              courseName = e;
            }
          "
        ></InputItem>
        <InputItem
          :name="'状态'"
          :value="state"
          @input="
            (e) => {
              state = e;
            }
          "
        ></InputItem>
      </div>
    </div>
    <div class="table-container">
      <div class="table-header">
        <div class="item" style="width: 114px">操作</div>
        <div class="item" style="width: 85px">状态</div>
        <div class="item" style="width: 120px">日期</div>
        <div class="item" style="width: 92px">节次</div>
        <div class="item" style="width: 96px">系</div>
        <div class="item" style="width: 135px">教研室</div>
        <div class="item" style="width: 146px">课程编号</div>
        <div class="item" style="width: 154px">考试课程</div>
        <div class="item" style="width: 125px">考场</div>
        <div class="item" style="width: 198px">原监考人</div>
        <div class="item" style="width: 297px">调整事由</div>
        <div class="item" style="width: 197px">新监考人</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item ztcz">
          <div style="margin-bottom:0px">
            <ButtonItem
              :name="'审核通过'"
              :link="''"
              :buttonColor="'blue'"
              @click=""
            ></ButtonItem>
          </div>
          <div style="margin-bottom:0px;margin-top: 10px;">
            <ButtonItem
              :name="'打回'"
              :link="''"
              :buttonColor="'red'"
              @click=""
            ></ButtonItem>
          </div>
        </div>
        <div class="item" style="width: 85px">{{ item.x }}</div>
        <div class="item" style="width: 120px">{{ item.jys }}</div>
        <div class="item" style="width: 92px">{{ item.kcbh }}</div>
        <div class="item" style="width: 96px">{{ item.kcmc }}</div>
        <div class="item" style="width: 135px">{{ item.pycc }}</div>
        <div class="item" style="width: 146px">{{ item.xxlx }}</div>
        <div class="item" style="width: 154px">{{ item.kcfzr }}</div>
        <div class="item-border right-content">
          <div class="right-content-info">
            <div class="item" style="width: 125px">{{ item.bgyy }}</div>
            <div class="item" style="width: 198px">
              {{ item.kxszbl2 }}
            </div>
            <div class="item" style="width: 297px">{{ item.ktcpszbl }}</div>
            <div class="item" style="width: 197px">
              {{ item.qzksszbl2 }}
            </div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div class="time-line-block">
                <div class="person-name">{{ item.spjd.spjd1.name }}</div>
                <div class="line-content">
                  <img
                    src="../../../assets/assessment/icon-finish.png"
                    alt=""
                  />
                  <div class="date-time">
                    <span class="date">{{ item.spjd.spjd1.date }}</span>
                    <span class="time">{{ item.spjd.spjd1.time }}</span>
                  </div>
                </div>
                <div class="operate">
                  <div class="ly-block" @click="showAddMessageDialog = true">
                    <img src="../../../assets/assessment/icon-ly.png" alt="" />
                    <div class="ly">留言</div>
                  </div>
                </div>
              </div>
              <div class="time-line-block">
                <div class="person-name">{{ item.spjd.spjd2.name }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-dai.png" alt="" />
                  <div class="date-time">
                    <span class="date">{{ item.spjd.spjd2.date }}</span>
                    <span class="time">{{ item.spjd.spjd2.time }}</span>
                  </div>
                </div>
                <div class="operate">
                  <div class="bubble-block">
                    <span
                      >请输入留言请输入请输入留言请输入留言请输入留言请输入</span
                    >
                    <div class="operate-button-list">
                      <div
                        class="button-ck"
                        @click="showAddMessageDialog = true"
                      >
                        查看
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="search-container">
      <ButtonItem
        style="    margin: 0 auto;"
        :name="'确定'"
        :link="''"
        :icon="''"
        :buttonColor="'yellow'"
        @click=""
      ></ButtonItem>
    </div>

    <el-dialog title="留言" :visible.sync="showAddMessageDialog" width="983px">
      <div class="message-container">
        <div>添加留言：</div>
        <div>
          <el-input
            v-model="meaasgeText"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showAddMessageDialog = false">
          确 定
        </button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      courseName: "",
      state: "",
      xq: "2020春",
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2020夏",
          label: "2020夏",
        },
      ],

      tableData: [
        {
          x: "已通过",
          jys: "2021-10-25",
          kcbh: "1，2，3",
          kcmc: "1部",
          pycc: "教研室1",
          xxlx: "78979817",
          kcfzr: "英语口语",
          bgyy: "考场2",
          kxszbl2: "李露露",
          ktcpszbl: "病情加大",
          qzksszbl2: "张璐璐",
          spjd: {
            spjd1: {
              name: "教员",
              date: "2021-06-04",
              time: "17：52",
            },
            spjd2: {
              name: "教研室主任",
              date: "2021-06-04",
              time: "17：52",
            },
          },
        },
      ],
      showAddMessageDialog: false,
      meaasgeText: "",
    };
  },
  methods: {
    change() {
      this.$nextTick(() => {
        let nodelist = document.querySelectorAll(".el-select__tags-text");
        if (nodelist.length >= 2) {
          nodelist[1].innerText = `(已选${this.zt.length})`;
        }
      });
    },
    toChangePlanDetail() {
      this.$router.push("/teacher/assessment/changeRecordDetail");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/plan.less";
@import "../../../styles/plan-record.less";
.spjd {
  .spjd-title {
    margin: 10px 0 0 118px !important;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #004ca7;
  }
  .time-line-horizon {
    position: relative;
    margin-left: 92px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    &::before {
      content: "";
      position: absolute;
      top: 35px;
      width: 276px !important;
      border-bottom: 2px dashed #4b78ac;
    }
    .time-line-block {
      display: flex;
      flex-direction: column;
      width: 260px;
      &:last-child {
        width: 140px;
      }
      .person-name {
        font-size: 14px;
        height: 15px;
        line-height: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;
        width: 50%;
        position: relative;
        left: -20%;
        text-align: center;
      }
      .line-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 40px;
        z-index: 100;
        > img {
          width: 26px;
          height: 26px;
        }
        .date-time {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #004ca7;
          .date,
          .time {
            margin: 3px 8px;
          }
        }
      }
      .operate {
        margin-top: 5px;
        position: relative;
        .ly-block {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          left: -8px;
          width: 40px;
          > img {
            width: 33px;
            height: 33px;
          }
          .ly {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #f1b107;
          }
        }
        .bubble-block {
          cursor: pointer;
          left: -50px;
          width: 280px;
          height: 60px;
          background: url(../../../assets/assessment/bubble.png) center
            no-repeat;
          background-size: 100%;
          position: relative;
          padding: 15px 10px 5px;
          box-sizing: border-box;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 20px;
            color: #004ca7;
          }
          .operate-button-list {
            position: absolute;
            bottom: 8px;
            right: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 3px;
            > div {
              width: 37px;

              box-sizing: border-box;
              background: #fff6dc;
              border: 1px solid #f1b107;
              border-radius: 4px;
              margin-left: 6px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;

              color: #f1b107;
              text-align: center;
            }
            .button-ck {
              background: #fff6dc;
              border: 1px solid #f1b107;
              color: #f1b107;
            }
            .button-bj {
              background: #ffefef;
              border: 1px solid #fa5339;
              color: #fa5339;
            }
            .button-sc {
              background: #f1f8fe;
              border: 1px solid #51aef6;
              color: #51aef6;
            }
          }
        }
      }
    }
  }
}
.message-container {
  > div {
    display: inline-block;
    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }
    &:nth-child(2) {
    }
  }
}
</style>
